<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" style="display: flex;align-items: center">
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          :type="!delFn?'primary':''"-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="addFn"-->
<!--          v-hasPermi="['system:sysMap:add']"-->
<!--        >标点模式-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          @click="beginDel"-->
<!--          :type="delFn?'danger':''"-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          v-hasPermi="['system:sysMap:add']"-->
<!--        >删除模式-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          size="mini"-->
<!--          @click="saveFn"-->
<!--          v-hasPermi="['system:sysMap:add']"-->
<!--        >保存点位-->
<!--        </el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <div class="">
          更换图标：
        </div>
      </el-col>
      <el-col :span="1.5" style="cursor: pointer">
        <div
          @click="showChangeIcon"
          style="width: 50px;min-height: 50px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center">
          <img v-if="selectIcon" class="" style="width: 30px;" :src="selectIcon.iconUrl"/>
        </div>
      </el-col>
    </el-row>
    <div class="img-box">
      <div class="" id="bgMap" style="position:relative;" >
        <img class="map-bg" :src="mapUrl" alt="" @load="useImgWH"/>
        <div class="cover-box-t" @click="mapSignFn"></div>
        <img
          class="map-sign"
          :src="item2.iconUrl"
          :style="{top:item2.percentX,left:item2.percentY}"
          alt=""
          v-for="(item2,index2) in mapSignList"
          :key="index2"
          @click="mapSignDelClick(item2)"
        />
      </div>
    </div>

    <!-- 添加或修改标点图标管理对话框 -->
    <el-dialog :title="titleIcon" :visible.sync="openIcon" width="500px" append-to-body>
      <el-form ref="formIcon" :model="formIcon" :rules="rulesIcon" label-width="80px">
        <el-form-item label="图标名称" prop="iconName">
          <el-input v-model="formIcon.iconName" placeholder="请输入图标名称" />
        </el-form-item>
        <el-form-item label="图标url" prop="iconUrl">
          <imageUpload v-model="formIcon.iconUrl" @input="iconUpInput"></imageUpload>
<!--          <el-input v-model="formIcon.iconUrl" placeholder="请输入图标url" />-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitformIcon">确 定</el-button>
        <el-button @click="cancelIcon">取 消</el-button>
      </div>
    </el-dialog>

    <el-drawer
      size="350px"
      :withHeader="false"
      :visible.sync="showDrawer"
      direction="rtl">
      <div class="" style="display: flex;align-items: center;justify-content:space-between;margin-bottom: 20px;padding: 20px 40px 0 20px;background: #fff">
        <div>图标管理</div>
        <el-button
          type="primary"
          size="mini"
          @click="addIcon"
          style="margin-left: 20px;"
        >新增
        </el-button>
      </div>
      <div class="cicon-box">
        <div class="cicon-col" style="" v-for="item in sysMapIconList" :key="item.id">
          <div class="cicon-col-l" >
            <img :src="item.iconUrl" alt="">
          </div>

          <div class="cicon-col-r">
            <div class="" style="margin-bottom: 8px;padding-right: 8px;">
              {{ item.iconName }}
            </div>
            <div class="">
              <el-button
                type="success"
                size="mini"
                @click="okIconFn(item)"
              >选择
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="editIconFn(item)"
              >修改
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="delIconFn(item)"
              >删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>


    <!-- 添加或修改园区地图标点对话框 -->
    <el-dialog :title="titleSign" :visible.sync="openSign" width="500px" append-to-body>
      <el-form ref="formSign" :model="formSign" :rules="rulesSign" label-width="80px">
        <el-form-item label="点位类型" prop="pointType">
          <el-select v-model="formSign.pointType" placeholder="请选择点位类型" @change="pointTypeSeChange">
            <el-option
              v-for="item in dictList"
              :key="item.id"
              :label="item.dictLabel"
              :value="item.dictLabel"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点位编码" prop="pointCode" v-if="formSign.pointType">
          <el-select v-model="formSign.pointCode" placeholder="请选择点位" @change="bmChoose">
            <el-option
              v-for="item in inspectionLocationList"
              :key="item.id"
              :label="item.qrCode"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormSign">确 定</el-button>
        <el-button @click="cancelSign">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listSysMapIcon, getSysMapIcon, delSysMapIcon, addSysMapIcon, updateSysMapIcon } from "@/api/system/sysMapIcon";
import {listInspectionLocation} from "@/api/smartParks/security/inspectionLocation";
import imageUpload from "@/components/ImageUpload";
import {listData} from "../../../api/system/dict/data";
import {deepClone, deepClone2} from "../../../utils";
import {addSysMapSign, addSysMapSigns, delSysMapSign, listSysMapSign} from "../../../api/system/sysMapSign";
export default {
  name: "mapSign",
  components:{imageUpload},
  data() {
    return {
      formSign:{

      },
      openSign:false,
      titleSign:'',
      rulesSign:{
        pointType: [
          { required: true, message: "请选择类型", trigger: "blur" }
        ],
        pointCode: [
          { required: true, message: "请选择编码", trigger: "blur" }
        ],
      },
      showDrawer: false,
      mapUrl: this.$route.query.mapUrl,
      delFn: false,
      formIcon: {},
      loading: true,
      openIcon: false,
      titleIcon:'',
      rulesIcon:{},
      mapSignList:[],
      pointParams:null,
      selectIcon:null,
      sysMapIconList:[],
      bgMapParams:{
        w:0,
        h:0
      },
      clickEventObj:null,
      inspectionPoiQuery:{
        type:''
      },
      inspectionLocationList:[],
      dictList:[]
    }
  },
  created() {
    this.getMapSignList()
    listData({dictType: "location_type"}).then((response) => {
      this.dictList = response.rows
    });
  },
  mounted() {
    this.getIconList()
    this.getListInspectionLocation()
    let dom=document.getElementById("bgMap")

    window.onload = function(){
      let _test = document.getElementById("bgMap"); //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
      let imgObj = new Image();
      imgObj.src = _test.src; //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
      console.log("imgObj",imgObj.clientHeight)
    }

    this.bgMapParams={
      w:dom.clientWidth,
      h:dom.clientHeight
    }
  },
  methods: {
    getListInspectionLocation(){
      this.inspectionLocationList=[]
      listInspectionLocation(this.inspectionPoiQuery).then(res=>{
        this.inspectionLocationList=res.rows
      })
    },
    addIcon(){
      this.resetIcon();
      this.openIcon = true;
      this.titleIcon = "添加标点图标管理";
    },
    resetIcon() {
      this.formIcon = {
        id: null,
        iconUrl: null,
        iconName: null,
        updateTime: null,
        createTime: null
      };
      this.resetForm("formIcon");
    },
    okIconFn(item){
      this.selectIcon=item
    },
    beginDel() {
      this.delFn = true
    },
    addFn() {
      this.delFn = false
    },
    showChangeIcon() {
      this.showDrawer = true
      console.log("hh")
    },
    /** 提交按钮 */
    submitformIcon() {
      this.$refs["formIcon"].validate(valid => {
        if (valid) {
          if (this.formIcon.id != null) {
            updateSysMapIcon(this.formIcon).then(response => {
              this.msgSuccess("修改成功");
              this.openIcon = false;
              this.getIconList();
            });
          } else {
            addSysMapIcon(this.formIcon).then(response => {
              this.msgSuccess("新增成功");
              this.openIcon = false;
              this.getIconList();
            });
          }
        }
      });
    },
    mapSignDelClick(item){
      const ids = item.id ;
      this.$confirm('是否确认删除标点图标为"' + item.pointCode + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delSysMapSign(ids);
      }).then(() => {
        this.getMapSignList();
        this.msgSuccess("删除成功");
      })
    },
    editIconFn(row){
      this.resetIcon();
      const id = row.id
      getSysMapIcon(id).then(response => {
        this.formIcon = response.data;
        this.openIcon = true;
        this.titleIcon = "修改标点图标管理";
      });
    },
    delIconFn(row){
      const ids = row.id ;
      this.$confirm('是否确认删除标点图标管理编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delSysMapIcon(ids);
      }).then(() => {
        this.getIconList();
        this.msgSuccess("删除成功");
      })
    },
    useImgWH(e){
      this.bgMapParams={
        w:e.target.width,
        h:e.target.height
      }
    },
    saveFn(){
      this.$confirm('是否确认添加', "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        return addSysMapSigns(this.mapSignList);
      }).then(() => {
        this.getMapSignList();
        this.msgSuccess("添加成功");
      })
    },
    iconUpInput(e){
      this.formIcon.iconUrl=e
    },
    getMapSignList(){
      listSysMapSign({mapId: this.$route.query.id}).then(res=>{
        this.mapSignList=res.rows
      })
    },
    resetFormSign() {
      let pointType=this.formSign.pointType
      this.formSign = {
        pointCode: null,
        pointType: pointType,
        percentX: null,
        percentY: null,
        pointParams: null,
        mapId: null,
        iconUrl: null,
        iconId: null,
        iconName: null
      };
      this.resetForm("formSign");
    },
    mapSignFn(e){
      let x=e.offsetX
      let y=e.offsetY
      let pointX=(x/this.bgMapParams.w)
      let pointY=(y/this.bgMapParams.h)
      let percentX= (pointY*100).toFixed(4)+'%'
      let percentY=(pointX*100).toFixed(4)+'%'
      let obj={
        percentX,
        percentY,
        iconUrl:this.selectIcon.iconUrl,
        iconId:this.selectIcon.id
      }
      this.clickEventObj=obj
      this.openSign=true
    },
    getIconList(){
      this.loading = true;
      listSysMapIcon().then(response => {
        this.sysMapIconList = response.rows;
        if (response.rows){
          this.selectIcon=response.rows[0]
        }

        this.loading = false;
      });
    },
    cancelIcon(){
      this.openIcon = false;
      this.resetIcon();
    },
    submitFormSign(){
      this.$refs["formSign"].validate(valid => {
        if (valid){
          let eventObj =this.clickEventObj
          this.formSign.mapId=this.$route.query.id
          this.formSign.percentX=eventObj.percentX
          this.formSign.percentY=eventObj.percentY
          this.formSign.iconUrl=eventObj.iconUrl
          this.formSign.iconId=eventObj.iconId
          this.formSign.iconName=this.selectIcon.iconName
          let obj= JSON.parse(JSON.stringify(this.formSign))
          addSysMapSign(this.formSign).then(res=>{
            if (res.code==200){
              this.getMapSignList()
              this.msgSuccess("添加成功");
              this.resetFormSign()
            }
          })
          this.openSign=false
        }else {
          return
        }
      })

    },
    bmChoose(item){
      this.formSign.pointType=item.type
      this.formSign.pointCode=item.qrCode
      this.formSign.pointParams=JSON.stringify(item)
    },
    cancelSign(){

    },
    pointTypeSeChange(e){
      this.formSign.pointType=e
      this.inspectionPoiQuery.type=e
      this.getListInspectionLocation()
    }
  }
}
</script>

<style scoped lang="scss">
.img-box {
  width: 100%;
  padding: 20px 0;
  position: relative;

  .map-bg {
    width: 100%;
    display: block;
  }
  .cover-box-t{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .map-sign{
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    width: 20px;
    z-index: 3;
    cursor: pointer;
  }
}

.cicon-box {
  padding: 20px 20px 100px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #f5f5f5;

  .cicon-col {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    .cicon-col-r{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: #666;
    }
    .cicon-col-l{
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 40px;
      }
    }
  }
}
</style>
